<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="60%"
      style="height='80vh'"
      :before-close="btnoff"
    >
      <el-row :gutter="20" style="padding-bottom: 20px">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【题型】:
            {{ rowDifficultydegree.questionType | emun(emunData.questionType) }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【编号】: {{ rowDifficultydegree.id }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【难度】:
            {{ rowDifficultydegree.difficulty | emun(emunData.difficulty) }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【标签】: {{ rowDifficultydegree.tags }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 0px">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【学科】: {{ rowDifficultydegree.subject }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【目录】: {{ rowDifficultydegree.catalog }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【方向】: {{ rowDifficultydegree.direction }}
          </div>
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row :gutter="20" style="padding-bottom: 10px">
        <el-col :span="6">
          <div class="grid-content bg-purple">【题干】:</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="padding-bottom: 10px; color: blue">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            {{
              rowDifficultydegree.question
                | html2Text(rowDifficultydegree.question)
            }}
          </div>
        </el-col>
      </el-row>
      <el-row
        :gutter="20"
        style="padding-bottom: 10px"
        v-if="
          rowDifficultydegree.questionType === '2' ||
          rowDifficultydegree.questionType === '1'
        "
      >
        <el-col :span="8">
          <div class="grid-content bg-purple">
            单选题选项:(以下选中的为正确答案)
          </div>
        </el-col>
      </el-row>
      <!-- <el-radio-group
        v-model="rowDifficultydegree.enterpriseID"
        size="mini"

      >
        <el-radio  v-for="(item, index) in rowDifficultydegree.options" :key="index" :value="1" :label="item.isRight" style="height: 30px" >{{item.title}}</el-radio>

      </el-radio-group> -->
      <!-- 单选 -->
      <div v-if="rowDifficultydegree.questionType === '1'">
        <div v-for="(item, index) in rowDifficultydegree.options" :key="index">
          <el-radio :value="1" :label="item.isRight">{{ item.title }}</el-radio>
        </div>
      </div>

      <!-- 多选 -->
      <el-checkbox-group
        :value="1"
        v-for="(item, index) in rowDifficultydegree.options"
        :key="index"
      >
        <el-checkbox
          v-if="rowDifficultydegree.questionType === '2'"
          :true-label="item.isRight"
          >{{ item.title }}</el-checkbox
        >
      </el-checkbox-group>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            【参考答案】:
            <el-button type="danger" @click="showVideo = true"
              >在线预览</el-button
            >
            <el-row></el-row>
            <video
              v-if="showVideo"
              style="width: 150%; height: 400px"
              :src="rowDifficultydegree.videoURL"
              controls="controls"
            ></video>
          </div>
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">【答案解析】: 无</div>
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            【答案备注】: {{ rowDifficultydegree.chkRemarks }}
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnoff">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
 <!-- 弹出框 -->

<script>
import {
  chkType,
  publishType,
  difficulty,
  questionType
} from '@/api/hmmm/constants.js'
export default {
  name: 'preview',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    rowDifficultydegree: {
      type: Object,
      default: () => {}
    }
  },
  components: {},
  filters: {
    emun: (val, array) => {
      const f = array.find(e => e.value === +val)
      return f ? f.label : '未知'
    }
  },
  data () {
    return {
      showVideo: false,
      emunData: {
        chkType: chkType,
        publishType: publishType,
        difficulty: difficulty,
        questionType: questionType
      } // 枚举类数据
    }
  },
  created () {

  },
  methods: {

    btnoff () {
      console.log(this.rowDifficultydegree)
      this.$emit('update:dialogVisible', false)
      this.showVideo = false
    }
  }
}

</script>

<style lang="less" scoped>
.el-radio-group {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>
